<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>css3 特效实现</title>
		<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.test{
			width:100px;
			height:100px;
			display:block;
			margin:10px;
			border-radius: 8px;
			border: 1px solid #999;
			background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#EEE));
			background-image: -moz-linear-gradient(top, #FFF, #DDD);
			background-image: -ms-linear-gradient(top, #FFF, #DDD);
			background-image: -o-linear-gradient(top, #FFF, #DDD);
			box-shadow: 0 0 4px #999;
			cursor: pointer;
			-moz-transition: all 800ms;
			-webkit-transition: all 800ms;
			-o-transition: all 800ms;
		}
		.test:hover{
			
			-moz-transform: scale(2);
			-webkit-transform: scale(2);
			-o-transform: scale(2);
			-ms-transform: scale(2);
			
		}
		.red{background-color:red;}
		.green{background-color:green;}
		.yellow{background-color:yellow;}
		.blue{background-color:blue;}
		.gary{background-color:gary;}
		</style>
	</head>
	<body>
		<div class="test red"></div>
		<div class="test green"></div>
		<div class="test yellow"></div>
		<div class="test blue"></div>
		<div class="test gary"></div>
	</body>
</html>
